<template>
  <!-- 导航栏 -->
  <div class="NavBar">
    <!-- 设置间距 gutter -->
    <!-- 加入style="margin-bottom: 8px;" -->
    <el-row :gutter="10" style="margin-top: 8px;margin-bottom: 8px;">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="router_B">
            <router-link to="/MyHomeView">细节的温柔的个人博客</router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="router_B">
            <router-link to="/JavaView">Java学习</router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="router_B">
            <router-link to="/SQLView">SQL学习</router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="router_B">
            <router-link to="/GitView">Git学习</router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="router_B">
            <router-link to="/AboutView">关于本站</router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <div class="router_B">
            <router-link to="/HomeView">回到首页</router-link>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
}
</script>
<style lang="scss">
.NavBar {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.NavBar a {
  font-weight: bold;
  color: #2c3e50;
  &.router-link-exact-active {
    color: #42b983;
  }
}
// ***element_ui start***
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  // 增大高度
  min-height: 36px;
  // 加入padding-top,使字体居中
  padding-top: 15px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
// ***element_ui end***

</style>

